import React from "react";
import PropTypes from "prop-types";

/**
 * 属性校验
 * 1 安装 prop-types 安装命令：npm i prop-types
 * 2 导入 import PropTypes from  'prop-types'
 * 3 使用 App.propTypes = {}
 *
 * 常用
 * PropTypes.number
 * PropTypes.bool
 * PropTypes.string
 * PropTypes.array
 * PropTypes.array.isRequired
 * PropTypes.shape({})
 * PropTypes.func
 *
 * 更多其它检验规则
 * 参考：https://reactjs.org/docs/typechecking-with-proptypes.html
 */

const Parent = () => {
  return (
    <div>
      <h2>父组件</h2>
      <hr />
      <App colors={'red'} />
    </div>
  );
}

const App = () => {
  return (
    <div>
      <h3>子组件</h3>
      props:{this.props.colors.join("--")}
    </div>
  );
}

// App.propTypes = {
//   count: PropTypes.number,
//   name: PropTypes.string,
//   colors: PropTypes.array.isRequired,
//   fn: PropTypes.func,
//   obj: PropTypes.shape({
//     name: PropTypes.string,
//     age: PropTypes.number,
//   }),
//   tag: PropTypes.element,
// };

export default Parent;
